<%--
  Created by IntelliJ IDEA.
  User: Jamie
  Date: 2018/4/15
  Time: 16:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../common/jsp/jqueryResource.jsp"></jsp:include>
<link rel="stylesheet" href="${basePath}bootstrap/css/bootstrap-table.min.css">
<link rel="stylesheet" href="${basePath}bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${basePath}bootstrap/css/font-awesome.min.css" >
<link rel="stylesheet" href="${basePath}bootstrap/bootstrap-datepicker/bootstrap.css">
<link rel="stylesheet" href="${basePath}bootstrap/css/custom.min.css" >
<link rel="stylesheet" href="${basePath}bootstrap/css/templatemo-style.css" >
<link rel="stylesheet" href="${basePath}bootstrap/css/bootstrapValidator.css" >
<link rel="stylesheet" href="${basePath}bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.min.css" >
<script src="${basePath}bootstrap/js/bootstrap-table.min.js"></script>
<script src="${basePath}bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="${basePath}bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<script src="${basePath}bootstrap/js/bootstrap.min.js"></script>
<%--<script src="${basePath}javascript/query/query.js"></script>--%>
<script type="text/javascript" src="${basePath}bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

<html>
<head>
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data" id="drbatchUpload"  action="drimport.html" method="post" class="form-horizontal">
    <button class="btn btn-success btn-xs" id="druploadEventBtn" style="height:26px;"  type="button" >选择文件</button>
    <input type="file" name="drfile"  style="width:0px;height:0px;" id="druploadEventFile">
    <input id="druploadEventPath"  disabled="disabled"  type="text" placeholder="请择excel表" style="border: 1px solid #e6e6e6; height: 26px;width: 200px;" />
</form>
<button type="button" class="btn btn-success btn-sm" style="width: 72px" onclick="user.druploadBtn()" >上传</button>
</div>
<table id="query_data"></table>
</body>
<script type="text/javascript">
    var user;
    $(function() {
        user = new User();
        user.init();
    })
    //导入查询
    /* $('drcx').bind('click',function () {*/
    var User = function() {
        this.init = function() {
            //模拟上传excel
            $("#druploadEventBtn").unbind("click").bind("click", function() {
                $("#druploadEventFile").click();
            });
            $("#druploadEventFile").bind("change", function() {
                $("#druploadEventPath").attr("value",    $("#druploadEventFile").val());
            });
        };
        //点击上传钮
        this.druploadBtn = function() {
            var uploadEventFile = $("#druploadEventFile").val();
            if (uploadEventFile == '') {
                alert("请择excel,再上传");
            } else if (uploadEventFile.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                alert("只能上传Excel文件");
            } else {
                var url = "drimport.html";
                var formData = new FormData($('form')[0]);
                user.sendAjaxRequest(url, "POST", formData);
            }
        };
        this.sendAjaxRequest = function(url, type, data) {
            $.ajax({
                url : url,
                type : type,
                data : data,
                dataType : "json",
                success : function(result) {
                    alert(result.message);
                    //重新加载table
                    $('#query_data').bootstrapTable('destroy');
                    var ReTable = new TableInit();
                    ReTable.Init();
                    ReTable.hiddenColomn();
                },
                error : function(result) {
                    alert("出错了,请检查导入的数据模板!");
                },
                cache : false,
                contentType : false,
                processData : false
            });
        };
    };
    /* });*/
</script>
</html>

